<template>
  <div id="topD">
    <div class="top1">
      <h1 class="top1-title">今日能力调用排行榜</h1>
      <p class="top1-desc">♦ {{renderTime(this.time)}}</p>
    </div>
    <div class="top2" v-for="item in tableData" v-if="tableData.length>0">
      <div style="display:flex;width:35%">
        <img src="../../assets/wsximg/111.png">
        <div class="cardTitle">
          <div class="Title1">{{item.name}}</div>
          <div class="Title2">{{item.total}}次</div>
        </div>
      </div>
      <div class="topMainer">
        <div class="Title1"></div>
        <div class="Title2"></div>
      </div>
      <div ref="a" id="a"></div>
    </div>
    <div class="top2"  v-if="tableData.length<=0">
      <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:30px;color:gray;">暂无数据</div>
    </div>



  </div>

</template>

<script>
import * as echarts from 'echarts'
import {getindex} from "@/api/statistics/statistics";

export default {
  data() {
    return {
      time: '',
      tableData: [
      ]
    }
  },
  mounted() {
    getindex().then(rest => {
      this.tableData = rest.data.useingStatisticsInforList
      this.time = rest.data.time
      var myChartA = echarts.init(this.$refs.res.a)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false,
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        series: [
          {
            data: [80, 32, 70, 34, 90, 30, 100],
            type: 'line',
            itemStyle: {
              normal: {

                lineStyle: {
                  color: 'rgb(0,117,192)',
                  width: 3,
                }
              }
            },

            areaStyle: {
              opacity: 0.58,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgb(0,156,255)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgb(224,241,255)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            smooth: true,
            symbol: "none",
          }
        ]
      }
      myChartA.setOption(option)
    })



  },
  methods: {
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
  }
}
</script>

<style scoped lang="scss">
#topD {
  width: 48%;
  height: 650px;
  margin: 9px;
  margin-left: 17px;
  background-color: white;
  border-radius: 13px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

}

.top1 {
  height: 90px;

  .top1-title {
    color: rgb(70, 70, 70);
    margin-left: 15px;
    margin-top: 15px;
    font-size: 31px;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .top1-desc {
    color: gray;
    margin-top: 10px;
    margin-left: 15px;
    font-size: 20px;
  }
}

.top2 {
  display: flex;
  height: 140px;
  color: black;
  margin: 18px 10px;
  margin-top:30px;
  background-color: rgb(245, 245, 245);
  padding-bottom: 20px;
  border-radius: 9px;
  padding: 10px;
  &:hover{
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: 0.3s;

  }

  img {
    margin-top: 25px;
    width: 70px;
    height: 70px;
    border-radius: 10px;
  }

  .cardTitle {
    margin-left: 10px;

    .Title1 {
      font-size: 22px;
      color: rgb(0, 0, 0);
      margin-top: 25px;
      font-weight: 600;
      width:200px;
    }

    .Title2 {
      margin-top: 10px;
      color: gray;
      margin-left:10px;
    }
  }

  .topMainer {
    width: 23%;
    padding-left: 40px;

    .Title1 {
      font-size: 22px;
      color: black;
      margin-top: 27px;
    }

    .Title2 {
      margin-top: 10px;
      color: gray
    }

  }

}

#a,
#b,
#c {
  width: 400px;

  height: 200px;
  margin-top: -40px;
  margin-right: -30px;
}
</style>
